<template>
  <h1>TestReactive</h1>
  <ul>
    <li
        v-for="(item, index) in girls"
        :key="index"
        @click="selectGirl(index)"
    >
      {{index}}. <button>{{ item }}</button>
    </li>
  </ul>
  <div>You have selected: {{ selected }}</div>
</template>

<script lang="ts">
import {reactive, toRefs} from 'vue'

export default {
  name: "TestReactive",
  setup() {
    const data = reactive({
      girls: ['Dajiao', 'Liuying', 'Xiaohong'],
      selected: '',
      selectGirl: (index: number) => {
        data.selected = data.girls[index]
      }
    })
    const refData = toRefs(data)

    return {
      ...refData
    }
  }
}
</script>

<style scoped>

</style>
